<template>
  <div>
    <!-- 头像区域 -->
    <div class="avatar-box">
      <!-- 插件无法帮转行内样式 -->
      <van-image
        round
        class="avatar"
        fit="cover"
        :src="userInfo.photo"
      />
      <div class="info-box">
        <h4>{{ userInfo.name }}</h4>
        <span>{{ userInfo.birthday }}</span>
      </div>
    </div>
    <!-- 快捷入口 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>

    <!-- cell区域 -->
    <van-cell-group>
      <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
      <van-cell to="/chat" title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell @click="$store.commit('user/logout')" title="退出登录" icon="info-o" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyMine',
  computed: {
    // 简化数据访问
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.$store.dispatch('user/reqUserInfo')
  }
}
</script>

<!--
    scoped只能让样式生效于当前组件里的内容
        就是当前组件写过的标签才有用，没写过的标签没有用
 -->
<style lang="less" scoped>
.avatar-box {
  @bgColor: #3296fa;
  height: 140px;
  background-color: @bgColor;
  display: flex;
  align-items: center;

  .avatar {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 10px;
  }

  .info-box {
    h4 {
      font-size: 18px;
      color: #fff;
      margin-bottom: 10px;
    }
    span {
      background-color: #fff;
      color: @bgColor;
      padding: 5px 2px;
    }
  }
}

.van-grid-item {
  color: #3296fa;
  &:nth-child(2) {
    color: #f00;
  }
  &:nth-child(3) {
    color: orange;
  }
}
</style>
